<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div style="padding: 20px;" id="app">
    <form class="layui-form">

        <div class="layui-form-item">
            <div class="layui-upload">
                <div class="layui-upload-list">
                    <input type="hidden" name="filename" id="filename" value="noimg.jpg"/>
                    <img class="layui-upload-img" id="imgname" style="width: 10%">
                    <p id="demoText"></p>
                </div>
                <button type="button" class="layui-btn" id="test1"><i class="layui-icon"></i>上传图片</button>
            </div>
        </div>


        <div class="layui-form-item">
                <input type="text" v-model="title" required  lay-verify="required" placeholder="标题" autocomplete="off" class="layui-input">
        </div>

        <div class="layui-form-item">
            <textarea v-model="content" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>

        <div class="layui-form-item">
                <a class="layui-btn" lay-submit lay-filter="formDemo" @click="add()">提交</a>
        </div>

    </form>
</div>
</body>
<script type="text/javascript" src="axios/vue.js"></script>
<script type="text/javascript" src="axios/axios.min.js"></script>
<script type="text/javascript" src="axios/qs.js"></script>
<script type="text/javascript" src="axios/getUrlParams.js"></script>
<script type="text/javascript" src="layer/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script src="layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">
    var qs = Qs
    var vmm = new Vue({
        el: '#app',
        data: {
            filename:"",
            title:"",
            content:"",
        },
        mounted(){
            layui.use('upload', function(){
                var $ = layui.jquery
                    ,upload = layui.upload;

                //普通图片上传
                var uploadInst = upload.render({
                    elem: '#test1'
                    ,url: 'admin/uploadImg' //改成您自己的上传接口
                    ,done: function(res){
                        //如果上传失败
                        console.log(res)
                        $("#filename").val(res.data.src)
                        $('#imgname').attr('src', "upload/"+res.data.src); //图片链接（base64）
                        if(res.code > 0){
                            return layer.msg('上传失败');
                        }
                        //上传成功
                    }
                });
            });
        },
        methods: {
            add() {
                this.filename = $("#filename").val()
                if(this.filename==""){
                    layer.msg("图片不能为空",{icon:5})
                    return false;
                }
                if(this.title==""){
                    layer.msg("标题不能为空",{icon:5})
                    return false;
                }
                axios.post('recycleAdd',qs.stringify({
                    title:this.title,
                    filename:this.filename,
                    content:this.content,
                })).then(response =>{
                    layer.alert("操作成功",{icon:6},function(){
                        window.parent.layer.closeAll();
                        window.parent.location.reload();
                    })

                }).catch(error =>{
                    console.log(error)
                })
            },






        }
    });
</script>
</html>